// Note: This file is dependent on Sass and Compass.
// Sass = http://sass-lang.com
// Compass = http://compass-style.org

// `Widths
//----------------------------------------------------------------------------------------------------

.input_tiny
	width: 50px

.input_small
	width: 100px

.input_medium
	width: 150px

.input_large
	width: 200px

.input_xlarge
	width: 250px

.input_xxlarge
	width: 300px

.input_full
	width: 100%

// Added via JS to <textarea> and class="input-full".
// Applies to IE6, IE7. Other browsers don't need it.
.input_full_wrap
	display: block
	padding-right: 8px

// `UI Consistency
//----------------------------------------------------------------------------------------------------

::-moz-focus-inner
	border: 0

input[type="search"]::-webkit-search-decoration
	display: none

input,
button,
select,
textarea
	-moz-background-clip: padding
	-webkit-background-clip: padding
	background-clip: padding-box
	margin: 0
	vertical-align: middle

button,
input[type="reset"],
input[type="submit"],
input[type="button"]
	-webkit-appearance: none
	+border-radius(11px)
	background: #ddd url(../images/button.png) repeat-x
	+linear-gradient(color-stops(#fff, #ddd))
	border: 1px solid
	border-color: #ddd #bbb #999
	cursor: pointer
	color: #333
	font: bold 12px/1.2 Arial, sans-serif
	outline: 0
	overflow: visible
	padding: 3px 10px 4px
	text-shadow: #fff 0 1px 1px
	width: auto

	// IE7
	*padding-top: 2px
	*padding-bottom: 0px

button
	// IE7
	*padding-top: 1px
	*padding-bottom: 1px

button[disabled],
input[type="reset"][disabled],
input[type="submit"][disabled],
input[type="button"][disabled]
	color: #888

textarea,
select,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"]
	-webkit-appearance: none
	+border-radius(0)
	+box-sizing(border-box)
	background-color: #fff
	border: 1px solid
	border-color: #848484 #c1c1c1 #e1e1e1
	color: #000
	outline: 0
	padding: 2px 3px
	font:
		size: 13px
		family: Arial, sans-serif
	height: 1.8em

	// IE7
	*padding-top: 2px
	*padding-bottom: 1px
	*height: auto

// Separate rule for Firefox.
// Cannot stack with WebKit's.

input.placeholder-text,
textarea.placeholder-text,
input:-moz-placeholder,
textarea:-moz-placeholder
	color: #888

::-webkit-input-placeholder
	color: #888

textarea[disabled],
select[disabled],
input[type="date"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="email"][disabled],
input[type="month"][disabled],
input[type="number"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="time"][disabled],
input[type="url"][disabled],
input[type="week"][disabled]
	background-color: #eee
	color: #888

button:focus,
button:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active
	-moz-box-shadow: #06f 0 0 7px
	-webkit-box-shadow: #06f 0 0 7px
	box-shadow: #06f 0 0 7px

	// for Opera
	z-index: 1

input[type="radio"]:focus,
input[type="radio"]:active,
input[type="checkbox"]:focus,
input[type="checkbox"]:active
	-moz-box-shadow: none
	-webkit-box-shadow: none
	box-shadow: none

.is_webkit select
	// Tweaks for Safari + Chrome.
	background:
		image: url(../images/select_arrow.gif)
		repeat: no-repeat
		position: right center
	padding-right: 20px

textarea,
select[multiple]
	height: auto

select[multiple],
.is_webkit select[multiple]
	background-image: none
	padding: 0

textarea
	min-height: 40px
	overflow: auto
	resize: vertical
	width: 100%

optgroup
	color: #000
	font-style: normal
	font-weight: normal

// `IE6
//----------------------------------------------------------------------------------------------------

// Everything below this line is for IE6.
// Delete it if you don't support it! :)

// Classes are added dynamically via JS,
// because IE6 doesn't support attribute
// selectors: .ie6_button, .ie6_input, etc.

// Note: These style rules are somewhat
// duplicated because IE6 bombs out when
// it sees attribute selectors. Example:

// .ie6_button {
//	 This works in IE6.
// }

// .ie6_button,
// input[type=submit] {
//	 This doesn't work.
// }

.ie6_button,
* html button
	background: #ddd url(../images/button.png) repeat-x
	border: 1px solid
	border-color: #ddd #bbb #999
	cursor: pointer
	color: #333
	font: bold 12px/1.2 Arial, sans-serif
	padding: 2px 10px 0px
	overflow: visible
	width: auto

* html button
	padding-top: 1px
	padding-bottom: 1px

.ie6_input,
* html textarea,
* html select
	background: #fff
	border: 1px solid
	border-color: #848484 #c1c1c1 #e1e1e1
	color: #000
	padding: 2px 3px 1px
	font-size: 13px
	font-family: Arial, sans-serif
	vertical-align: top

* html select
	margin-top: 1px

.placeholder_text,
.ie6_input_disabled,
.ie6_button_disabled
	color: #888

.ie6_input_disabled
	background: #eee